<template>
  <div class="dashboardpage">
    <TopNavbar />
    <div class="main-content">
      <SideMenu />
      <router-view class="content" />
    </div>
  </div>
</template>

<script>
import TopNavbar from '@/components/TopNavbar.vue';
import SideMenu from '@/components/SideMenu.vue';

export default {
  name: 'DashboardPage',
  components: {
    TopNavbar,
    SideMenu
  }
};
</script>

<style>
.dashboardpage {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使页面占满整个视口 */
}

.main-content {
  display: flex;
  flex: 1; /* 使主内容区域占据剩余空间 */
}

.content {
  flex: 1; /* 使路由视图占据剩余空间 */
  padding: 20px;
}
</style>
